import React, { memo, useState } from 'react'
import { NavLink } from 'react-router-dom';
import { HotLeaderboardItemWrapper } from "./style"
import HotLeaderboardDetailItem from '../hot-leaderboard-detail-item'

export default memo(function HotLeaderboardItem(props) {

    const { id, name, coverImgUrl, tracks } = props;
    const url = coverImgUrl + "?param=100y100";
    const tracksList = tracks ? tracks.slice(0, 10) : [];
    
    return (
        <HotLeaderboardItemWrapper url={url}>
            <div className="item-top">
                <div className="item-top-img" />
                <button className="item-top-mask sprite_covor" />
                <div className="item-top-right">
                    <span>{name}</span>
                    <div className="item-top-right-img">
                        <button className="recommend_hot_leaderboard_img item-top-right-play"></button>
                        <button className="recommend_hot_leaderboard_img item-top-right-add"></button>
                    </div>
                </div>
            </div>

            <div className="item-bottom">
                {
                    tracksList.map((item, index) => {
                        return <HotLeaderboardDetailItem key={item.id} {...item} index={index}></HotLeaderboardDetailItem>
                    })
                }
                <div className="more">
                    <NavLink to="/">查看全部&gt;</NavLink>
                </div>
            </div>
        </HotLeaderboardItemWrapper>
    )
})
